<template>
    <van-popup v-model:show="showFlag" :style="{ padding: '0px' }" position="bottom" round @close="closePop">
        <van-picker 
        :title="title" 
        :columns-field-names="setProps" 
        :columns="lists" 
        @confirm="onConfirm" 
        @cancel="closePop" 
        @change="onChange"/>
    </van-popup>
</template>

<script setup>
import {ref,watch} from 'vue'
const props = defineProps({
    show:{
        type:Boolean,
        default:false 
    },
    lists:{
        type:Array,
        default:[] 
    },
    title:{
        type:String,
        default:'请选择'
    },
    setProps:{
        type:Object,
        default:{ text: 'name', value: 'id'}
    }
})

const emit = defineEmits(['close','update:show','confirm','change'])

const showFlag = ref(false)
//  const lists = ref([
//          { name: '杭州', id: 'Hangzhou' },
//             { name: '宁波', id: 'Ningbo' },
//             { name: '温州', id: 'Wenzhou' },
//             { name: '绍兴', id: 'Shaoxing' },
//             { name: '湖州', id: 'Huzhou' },
//  ])

watch(()=>props.show,(newData,oldData)=>{
    showFlag.value = newData
})

const closePop = ()=>{
    showFlag.value = false
    emit('update:show', false)
    emit('close')
}

const onConfirm = ({ selectedValues })=>{
    //console.log("onConfirm:",selectedValues)
    emit('confirm',selectedValues.join(','))
    closePop()
}

const onChange = (e)=>{
    //console.log("onChange:",e)
    emit('change',e)
}


</script>